
import React, {  useRef } from 'react'
import { Popup,Button, Radio, Form, Input,  Toast  } from 'antd-mobile'

import url from '../config/url'
import req from '../http/req'
const AddDialog = (props) => {
    const onFinish = (values) => {
        formRef.current
            .validateFields([
                'username',
                'password',
                'mobile',
                'email',
                'gender',
                'status',
            ])
            .then((res) => {
                req.post(url.AddUser,values).then(res=>{
                    console.log(res.data);
                    if(res.data.errNo===0){
                        Toast.show({
                            icon: 'success',
                            content: '添加成功',
                          })
                        props.closeDrawer()
                        props.fup()
                    }
                })
            })
    }

    const formRef = useRef()

    return (
        <>
            {/* <Mask visible={true} > */}
            <Popup
              visible={true}
              showCloseButton
              onClose={() => {
                props.closeDrawer()
              }}
              bodyStyle={{
                borderTopLeftRadius: '8px',
                borderTopRightRadius: '8px',
                minHeight: '20vh',
              }}
            >
                <Form layout='horizontal' onFinish={onFinish} ref={formRef}>
                    <Form.Header>添加用户信息</Form.Header>
                    <Form.Item label='用户名' name='username'>
                        <Input placeholder='请输入' />
                    </Form.Item>
                    <Form.Item label='密码' name='password'>
                        <Input placeholder='请输入' />
                    </Form.Item>
                    <Form.Item label='邮箱' name='email'>
                        <Input placeholder='请输入' />
                    </Form.Item>
                    <Form.Item
                        label="性别"
                        name='gender'
                    >
                        <Radio.Group>
                            <Radio value="1"> 男 </Radio>
                            <Radio value="2"> 女 </Radio>
                            <Radio value="3"> 保密 </Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item
                        label="状态"
                        name='status'
                    >
                        <Radio.Group>
                            <Radio value="1"> 正常 </Radio>
                            <Radio value="2"> 禁用 </Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item label='手机号' name='mobile'>
                        <Input placeholder='请输入' />
                    </Form.Item>
                    <Form.Item >
                        <Button type="primary">
                            确定添加
                        </Button>
                    </Form.Item>
                </Form>
            </Popup>
        </>
    )
}

export default AddDialog